<template>
    <div class="bake">
        <el-dialog
            custom-class="my-dialog"
            :visible.sync="dialog1Visible"
            title="NG预警信息"
            :width="dialogwidth"
            :height="dialogHeight"
            >
            <div class="warningbody">
                <i class="el-icon-warning-outline"></i>&nbsp;烘烤1线扫码NG{{ currentValue1 }}pcs,已达到预警值！
            </div>
        </el-dialog>
        <el-dialog
            custom-class="my-dialog"
            :visible.sync="dialog2Visible"
            title="NG预警信息"
            :width="dialogwidth"
            :height="dialogHeight"
            >
            <div class="warningbody">
                <i class="el-icon-warning-outline"></i>&nbsp;烘烤2线扫码NG{{ currentValue2 }}pcs,已达到预警值！
            </div>
        </el-dialog>
        <el-dialog
            custom-class="my-dialog"
            :visible.sync="dialog3Visible"
            title="NG预警信息"
            :width="dialogwidth"
            :height="dialogHeight"
            >
            <div class="warningbody">
                <i class="el-icon-warning-outline"></i>&nbsp;烘烤3线扫码NG{{ currentValue3 }}pcs,已达到预警值！
            </div>
        </el-dialog>
        <div class="toparea">
            <div class="statuslist">
                <div class="status_description">
                    <img src="../assets/green.png" class="status1">
                    <p class="description">生产</p>
                </div>
                <div class="status_description">
                    <img src="../assets/yellow.png" class="status2">
                    <p class="description">待机</p>
                </div>
                <div class="status_description">
                    <img src="../assets/red.png" class="status3">
                    <p class="description">停机</p>
                </div>
            </div>
            <div class="currenttime">{{ currentTime }}</div>
        </div>
        <div class="mainarea">
            <div class="running_state">
                <p class="subtitle">运行状态</p>
                <div class="statearea">
                    <div class="statecontent">
                        <div class="linearea">
                            <div class="linestate">
                                <p class="topic">1线</p>
                                <div class="robots">
                                    <div class="shortline"></div>
                                    <img src="../assets/load.png" class="robot_icon">
                                    <div class="longline"></div>
                                    <img src="../assets/robot.png" class="robot_icon">
                                    <div class="longline"></div>
                                    <img src="../assets/unload.png" class="robot_icon">
                                    <div class="shortline"></div>
                                </div>
                            </div>
                            <div class="linestatus">
                                <div class="robot_state robot1">
                                    <p class="robot_name">上料机械手</p>
                                    <img src="../assets/green.png" class="robotstatus1" v-show="line1Robot1.isrun">
                                    <img src="../assets/yellow.png" class="robotstatus2" v-show="line1Robot1.isstandby" v-if="isFlashing">
                                    <img src="../assets/red.png" class="robotstatus3" v-show="line1Robot1.isshutdown" v-if="isFlashing">
                                </div>
                                <div class="robot_state robot2">
                                    <p class="robot_name">调度机器人</p>
                                    <img src="../assets/green.png" class="robotstatus1" v-show="line1Robot2.isrun">
                                    <img src="../assets/yellow.png" class="robotstatus2" v-show="line1Robot2.isstandby" v-if="isFlashing">
                                    <img src="../assets/red.png" class="robotstatus3" v-show="line1Robot2.isshutdown" v-if="isFlashing">
                                </div>
                                <div class="robot_state robot3">
                                    <p class="robot_name">下料机械手</p>
                                    <img src="../assets/green.png" class="robotstatus1" v-show="line1Robot3.isrun">
                                    <img src="../assets/yellow.png" class="robotstatus2" v-show="line1Robot3.isstandby" v-if="isFlashing">
                                    <img src="../assets/red.png" class="robotstatus3" v-show="line1Robot3.isshutdown" v-if="isFlashing">
                                </div>
                            </div>
                        </div>
                        <div class="linearea">
                            <div class="linestate">
                                <p class="topic">2线</p>
                                <div class="robots">
                                    <div class="shortline"></div>
                                    <img src="../assets/load.png" class="robot_icon">
                                    <div class="longline"></div>
                                    <img src="../assets/robot.png" class="robot_icon">
                                    <div class="longline"></div>
                                    <img src="../assets/unload.png" class="robot_icon">
                                    <div class="shortline"></div>
                                </div>
                            </div>
                            <div class="linestatus">
                                <div class="robot_state robot1">
                                    <p class="robot_name">上料机械手</p>
                                    <img src="../assets/green.png" class="robotstatus1" v-show="line1Robot1.isrun">
                                    <img src="../assets/yellow.png" class="robotstatus2" v-show="line1Robot1.isstandby" v-if="isFlashing">
                                    <img src="../assets/red.png" class="robotstatus3" v-show="line1Robot1.isshutdown" v-if="isFlashing">
                                </div>
                                <div class="robot_state robot2">
                                    <p class="robot_name">调度机器人</p>
                                    <img src="../assets/green.png" class="robotstatus1" v-show="line1Robot2.isrun">
                                    <img src="../assets/yellow.png" class="robotstatus2" v-show="line1Robot2.isstandby" v-if="isFlashing">
                                    <img src="../assets/red.png" class="robotstatus3" v-show="line1Robot2.isshutdown" v-if="isFlashing">
                                </div>
                                <div class="robot_state robot3">
                                    <p class="robot_name">下料机械手</p>
                                    <img src="../assets/green.png" class="robotstatus1" v-show="line1Robot3.isrun">
                                    <img src="../assets/yellow.png" class="robotstatus2" v-show="line1Robot3.isstandby" v-if="isFlashing">
                                    <img src="../assets/red.png" class="robotstatus3" v-show="line1Robot3.isshutdown" v-if="isFlashing">
                                </div>
                            </div>
                        </div>
                        <div class="linearea">
                            <div class="linestate">
                                <p class="topic">3线</p>
                                <div class="robots">
                                    <div class="shortline"></div>
                                    <img src="../assets/load.png" class="robot_icon">
                                    <div class="longline"></div>
                                    <img src="../assets/robot.png" class="robot_icon">
                                    <div class="longline"></div>
                                    <img src="../assets/unload.png" class="robot_icon">
                                    <div class="shortline"></div>
                                </div>
                            </div>
                            <div class="linestatus">
                                <div class="robot_state robot1">
                                    <p class="robot_name">上料机械手</p>
                                    <img src="../assets/green.png" class="robotstatus1" v-show="line1Robot1.isrun">
                                    <img src="../assets/yellow.png" class="robotstatus2" v-show="line1Robot1.isstandby" v-if="isFlashing">
                                    <img src="../assets/red.png" class="robotstatus3" v-show="line1Robot1.isshutdown" v-if="isFlashing">
                                </div>
                                <div class="robot_state robot2">
                                    <p class="robot_name">调度机器人</p>
                                    <img src="../assets/green.png" class="robotstatus1" v-show="line1Robot2.isrun">
                                    <img src="../assets/yellow.png" class="robotstatus2" v-show="line1Robot2.isstandby" v-if="isFlashing">
                                    <img src="../assets/red.png" class="robotstatus3" v-show="line1Robot2.isshutdown" v-if="isFlashing">
                                </div>
                                <div class="robot_state robot3">
                                    <p class="robot_name">下料机械手</p>
                                    <img src="../assets/green.png" class="robotstatus1" v-show="line1Robot3.isrun">
                                    <img src="../assets/yellow.png" class="robotstatus2" v-show="line1Robot3.isstandby" v-if="isFlashing">
                                    <img src="../assets/red.png" class="robotstatus3" v-show="line1Robot3.isshutdown" v-if="isFlashing">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="Realtime_Alarm">
                <div class="line_Alarm">
                    <div class="subtitle">1线报警信息</div>
                    <div class="alarmarea">
                        <div class="alarmcontent">
                            <div class="alarmtopic">
                                <img src="../assets/alarm_light.png" class="alarmlight">
                                <p class="alarmtitle">1线异常报警</p>
                            </div>
                            <el-table
                                class="alarmlist"
                                :data="tableData1"
                                size="mini"
                                :header-cell-style="{ padding:0,background:'#0a1136',color:'white',textAlign:'center'}"
                                :cell-style="{padding:0,background:'#0d1543',color:'red',textAlign: 'center',fontWeight:'bold'}"
                                style="width: 100%">
                                <el-table-column
                                    prop="alarmtime"
                                    label="报警时间"
                                    width="140">
                                </el-table-column>
                                <el-table-column
                                    prop="alarminfor"
                                    label="报警信息"
                                    show-overflow-tooltip>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                </div>
                <div class="line_Alarm">
                    <div class="subtitle">2线报警信息</div>
                    <div class="alarmarea">
                        <div class="alarmcontent">
                            <div class="alarmtopic">
                                <img src="../assets/alarm_light.png" class="alarmlight">
                                <p class="alarmtitle">2线异常报警</p>
                            </div>
                            <el-table
                                class="alarmlist"
                                :data="tableData2"
                                size="mini"
                                :header-cell-style="{ padding:0,background:'#0a1136',color:'white',textAlign:'center'}"
                                :cell-style="{padding:0,background:'#0d1543',color:'red',textAlign: 'center',fontWeight:'bold'}"
                                style="width: 100%">
                                <el-table-column
                                    prop="alarmtime"
                                    label="报警时间"
                                    width="140">
                                </el-table-column>
                                <el-table-column
                                    prop="alarminfor"
                                    label="报警信息"
                                    show-overflow-tooltip>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                </div>
                <div class="line_Alarm">
                    <div class="subtitle">3线报警信息</div>
                    <div class="alarmarea">
                        <div class="alarmcontent">
                            <div class="alarmtopic">
                                <img src="../assets/alarm_light.png" class="alarmlight">
                                <p class="alarmtitle">3线异常报警</p>
                            </div>
                            <el-table
                                class="alarmlist"
                                :data="tableData3"
                                size="mini"
                                :header-cell-style="{ padding:0,background:'#0a1136',color:'white',textAlign:'center'}"
                                :cell-style="{padding:0,background:'#0d1543',color:'red',textAlign: 'center',fontWeight:'bold'}"
                                style="width: 100%">
                                <el-table-column
                                    prop="alarmtime"
                                    label="报警时间"
                                    width="140">
                                </el-table-column>
                                <el-table-column
                                    prop="alarminfor"
                                    label="报警信息"
                                    show-overflow-tooltip>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="defectinfor">
                <div class="linedefect">
                    <p class="subtitle">1线NG品数据</p>
                    <div class="defectarea">
                        <div class="defectcontent">
                            <p class="defecttext">扫码NG</p>
                            <div class="chart">
                                <el-progress :text-inside="true" :stroke-width="24" :percentage="progressValue(currentValue1,maxValue1)" :color="progressColor1"></el-progress>
                                <p>{{ currentValue1 }}/{{ maxValue1 }}</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="linedefect">
                    <p class="subtitle">2线NG品数据</p>
                    <div class="defectarea">
                        <div class="defectcontent">
                            <p class="defecttext">扫码NG</p>
                            <div class="chart">
                                <el-progress :text-inside="true" :stroke-width="24" :percentage="progressValue(currentValue2,maxValue2)" :color="progressColor2"></el-progress>
                                <p>{{ currentValue2 }}/{{ maxValue2 }}</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="linedefect">
                    <p class="subtitle">3线NG品数据</p>
                    <div class="defectarea">
                        <div class="defectcontent">
                            <p class="defecttext">扫码NG</p>
                            <div class="chart">
                                <el-progress :text-inside="true" :stroke-width="24" :percentage="progressValue(currentValue3,maxValue3)" :color="progressColor3"></el-progress>
                                <p>{{ currentValue3 }}/{{ maxValue3 }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<style scoped>
.bake{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    background: url(../assets/backimg.jpeg) no-repeat center center;
    background-size: cover;
    background-position: center;
    z-index: -1;
    color: white;
}
.toparea{
    width: 100%;
    height: 3.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.statuslist{
    width: 30%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: absolute;
}
.status_description{
    width: 5.625rem;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.status1{
    width: 1.875rem;
    height: 1.875rem;
}
.status2{
    width: 2.1875rem;
    height: 2.1875rem;
}
.status3{
    width: 2.5rem;
    height: 2.5rem;
}
.status1, .status2, .status3{
    margin-top: .1875rem;
}
.description{
    font-size: 1.5rem;
    vertical-align: center;
}
.currenttime{
    font-size: 1.25rem;
    position: absolute;
    right: 1.25rem;
}
.mainarea{
    width: 100%;
    height: 95%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    /* margin-top: -0.3125rem; */
}
.running_state{
    width: 96%;
    height: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.subtitle{
    color: rgba(41, 224, 227, 1);
    /* font-size: 1.125rem; */
    font-weight: bold;
    margin-bottom: .3125rem;
}
.statearea{
    width: 100%;
    height: 95%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: .5rem;
    border: .125rem solid rgba(41, 224, 227, 1);
    box-shadow: 0rem 0rem .3125rem rgba(41, 211, 227, 1);
}
.statecontent{
    width: 99.8%;
    height: 99%;
    background: rgba(41, 180, 227, 0.1);
    border-radius: .375rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.linearea{
    width: 100%;
    height: 33%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.linestate{
    width: 100%;
    /* height: 30%; */
    display: flex;
    justify-content: center;
    align-items: center;
}
.linestatus{
    width: 100%;
    height: 1.875rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
.topic{
    font-size: 1.125rem;
    margin-right: .75rem;
}
.robots{
    display: flex;
    align-items: center;
}
.shortline{
    width: 7.5rem;
    height: .3125rem;
    background: silver;
}
.longline{
    width: 21.875rem;
    height: .3125rem;
    background: silver;
}
.robot_icon{
    width: 3.125rem;
    height: 3.75rem;
}
.robot_state{
    width: 6.25rem;
    display: flex;
    align-items: center;
}
.robot1{
    margin-left: 2.5rem;
}
.robot2{
    margin-left: 18.75rem;
    margin-right: 16.25rem;
}
.robot3{
    margin-left: 2.5rem;
}
.robotstatus1{
    width: 1.25rem;
    height: 1.25rem;
}
.robotstatus2{
    width: 1.25rem;
    height: 1.25rem;
}
.robotstatus3{
    width: 1.25rem;
    height: 1.25rem;
}
.Realtime_Alarm{
    width: 96%;
    height: 30%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.line_Alarm{
    width: 32%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}
.alarmarea{
    width: 100%;
    height: 86%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* background: rgba(41, 180, 227, 0.31); */
    border-radius: .5rem;
    border: .125rem solid rgba(41, 224, 227, 1);
    box-shadow: 0rem 0rem .3125rem rgba(41, 211, 227, 1);
}
.alarmcontent{
    width: 99%;
    height: 98%;
    background: rgba(41, 180, 227, 0.1);
    border-radius: .375rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.alarmtopic{
    width: 100%;
    height: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.alarmlight{
    width: 1.875rem;
    height: 1.875rem;
    margin-right: .625rem;
}
.alarmtitle{
    font-size: 1.25rem;
    font-weight: 800;
    color: red;
}
.alarmlist{
    margin-top: .5rem;
    /* height: 60%; */
    overflow-y: auto; /* 当内容超出时显示垂直滚动条 */
}
.el-table, .el-table__expanded-cell {
    background-color: #0d1543 !important;
}
.el-table::before {
    height: 0;
}
.defectinfor{
    width: 96%;
    height: 18%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.linedefect{
    width: 32%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}
.defectarea{
    width: 100%;
    height: 6.25rem;
    display: flex;
    justify-content: center;
    align-items: center;
    /* background: rgba(41, 180, 227, 0.31); */
    border-radius: .5rem;
    border: .125rem solid rgba(41, 224, 227, 1);
    box-shadow: 0rem 0rem .3125rem rgba(41, 211, 227, 1);
}
.defectcontent{
    width: 99%;
    height: 98%;
    background: rgba(41, 180, 227, 0.1);
    border-radius: .375rem;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    /* align-items: center; */
    padding-left: 3.75rem;
}
.chart{
    display: flex;
    align-items: center;
}
.el-progress{
    width: 16.25rem;
    margin-right: .625rem;
}
.warningbody{
    color: #FF4500;
    font-size: 1.75rem;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    /* padding: 0; */
    height: 7.5rem;
}
</style>
<script>
export default{
    mounted(){
        this.line1Robot1.status='standby'
        this.line1Robot2.status='shutdown'
        this.line1Robot3.status='run'
        this.startFlashing()
    },
    data(){
        return{
            dialogwidth:'46.875rem',
            dialogHeight:'12.5rem',
            currentTime: this.getCurrentDateTime(),
            isFlashing:undefined,
            currentValue1: 16, // 实际值
            maxValue1: 30, // 最大值
            warningValue1: 25, // 预警值
            currentValue2: 18, // 实际值
            maxValue2: 20, // 最大值
            warningValue2: 15, // 预警值
            currentValue3: 12, // 实际值
            maxValue3: 25, // 最大值
            warningValue3: 20, // 预警值
            dialog1Visible: false,
            dialog2Visible: false,
            dialog3Visible: false,
            line1Robot1:{
                status:'',
                isrun:undefined,
                isstandby:undefined,
                isshutdown:undefined
            },
            line1Robot2:{
                status:'',
                isrun:undefined,
                isstandby:undefined,
                isshutdown:undefined
            },
            line1Robot3:{
                status:'',
                isrun:undefined,
                isstandby:undefined,
                isshutdown:undefined
            },
            tableData1: [{
                alarmtime: '2025-02-12 07:47:16',
                alarminfor: '伺服扭矩超限报警'
            }, {
                alarmtime: '2025-02-12 08:02:43',
                alarminfor: '未确定多轴协调动作中的原点,检查原点是否发生偏移'
            }],
            tableData2: [, {
                alarmtime: '2025-02-12 08:09:26',
                alarminfor: '位置偏差警告'
            }],
            tableData3: []
        }
    },
    watch:{
        'line1Robot1.status': function(newVal, oldVal){
            switch(this.line1Robot1.status){
                case 'run':
                    this.line1Robot1.isrun=true
                    this.line1Robot1.isstandby=false
                    this.line1Robot1.isshutdown=false
                    break;
                case 'standby':
                    this.line1Robot1.isrun=false
                    this.line1Robot1.isstandby=true
                    this.line1Robot1.isshutdown=false
                    break;
                case 'shutdown':
                    this.line1Robot1.isrun=false
                    this.line1Robot1.isstandby=false
                    this.line1Robot1.isshutdown=true
                    break;
                default:
                    break;
            }
        },
        'line1Robot2.status': function(newVal, oldVal){
            switch(this.line1Robot2.status){
                case 'run':
                    this.line1Robot2.isrun=true
                    this.line1Robot2.isstandby=false
                    this.line1Robot2.isshutdown=false
                    break;
                case 'standby':
                    this.line1Robot2.isrun=false
                    this.line1Robot2.isstandby=true
                    this.line1Robot2.isshutdown=false
                    break;
                case 'shutdown':
                    this.line1Robot2.isrun=false
                    this.line1Robot2.isstandby=false
                    this.line1Robot2.isshutdown=true
                    break;
                default:
                    break;
            }
        },
        'line1Robot3.status': function(newVal, oldVal){
            switch(this.line1Robot3.status){
                case 'run':
                    this.line1Robot3.isrun=true
                    this.line1Robot3.isstandby=false
                    this.line1Robot3.isshutdown=false
                    break;
                case 'standby':
                    this.line1Robot3.isrun=false
                    this.line1Robot3.isstandby=true
                    this.line1Robot3.isshutdown=false
                    break;
                case 'shutdown':
                    this.line1Robot3.isrun=false
                    this.line1Robot3.isstandby=false
                    this.line1Robot3.isshutdown=true
                    break;
                default:
                    break;
            }
        },
    },
    computed:{
        progressColor1() {
            return this.showWarning1 ? '#FF4500' : '#20a0ff'; // 预警时变色
        },
        showWarning1() {
            // return this.currentValue >= this.warningValue;
            if(this.currentValue1 >= this.warningValue1){
                this.dialog1Visible=true
                return true
            }
            else{
                return false
            }
        },
        progressColor2() {
            return this.showWarning2 ? '#FF4500' : '#20a0ff'; // 预警时变色
        },
        showWarning2() {
            // return this.currentValue >= this.warningValue;
            if(this.currentValue2 >= this.warningValue2){
                this.dialog2Visible=true
                return true
            }
            else{
                return false
            }
        },
        progressColor3() {
            return this.showWarning3 ? '#FF4500' : '#20a0ff'; // 预警时变色
        },
        showWarning3() {
            // return this.currentValue >= this.warningValue;
            if(this.currentValue3 >= this.warningValue3){
                this.dialog3Visible=true
                return true
            }
            else{
                return false
            }
        },
    },
    methods:{
        startFlashing() {
            this.isFlashing = true;
            this.intervalId = setInterval(() => {
                this.isFlashing = !this.isFlashing;
                this.currentTime = this.getCurrentDateTime();
            }, 1000); // 每秒切换一次
        },
        getCurrentDateTime(){
            const now = new Date();
            return `${now.getFullYear()}-${this.padNumber(now.getMonth() + 1)}-${this.padNumber(now.getDate())}
            ${this.padNumber(now.getHours())}:${this.padNumber(now.getMinutes())}:${this.padNumber(now.getSeconds())}`;
        },
        padNumber(num) {
            return num < 10 ? '0' + num : num;
        },
        progressValue(currentValue,maxValue) {
            return (currentValue / maxValue).toFixed(4) * 100;
        },
    }
}
</script>